<template>
  <div class="mainpg">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="mainor_form" style="min-height: 40px">
          <div class="mainor_te">
            <router-link to="/user/freight/add">
              <el-button type="primary">新增模板</el-button></router-link
            >
          </div>
        </div>
        <div class="main_table" style="min-height: 670px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list"
            element-loading-text="加载中"
            fit
            highlight-current-row
          >
            <el-table-column
              label="模板名称"
              prop="name"
              :render-header="renderHeader_purchase"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                {{ scope.row.name }}
                <el-tag
                  style="margin-left: 10px"
                  v-if="scope.row.default == 1"
                  type="success"
                  size="small"
                  >默认</el-tag
                ><el-tag
                  class="set_default"
                  v-else
                  type="danger"
                  size="small"
                  @click="setDefault(scope)"
                  >设为默认</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              label="描述"
              prop="remark"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="用户数量"
              prop="member_length"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="创建时间" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{ parseTime(Number(scope.row.created_at)) }}
              </template>
            </el-table-column>

            <el-table-column
              label="管理操作"
              align="center"
              fixed="right"
              width="180"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <router-link :to="'/user/freight/edit/' + scope.row.id">
                  <el-link type="warning">编辑</el-link></router-link
                >
                <el-link @click="handleUser(scope.row)" type="success"
                  >用户</el-link
                >

                <el-link type="danger" @click="handleDelete(scope.row.id)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <el-pagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  delivery_index,
  delivery_delete,
  delivery_setDefault,
} from "@/api/user/userFreight";
import rules from "@/rules/global/globalRole";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";

export default {
  components: {},
  data() {
    return {
      // 验证
      rules,
      parseTime,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 列表数据
      list: [],
      type_list: {},
      listLoading: false,
    };
  },
  methods: {
    renderHeader_purchase(h, { column, $index }) {
      return h("div", [
        h("span", {
          domProps: {
            innerHTML: column.label,
          },
          on: {
            click: () => {
              console.log(`${column.label}   ${$index}`);
            },
          },
        }),
        h(
          "el-tooltip",
          {
            attrs: {
              effect: "dark",
              content: "注释：新注册或未绑定模板的用户自动纳入默认模板",
              placement: "top",
            },
          },
          [
            h("i", {
              style: "margin-left: 5px;margin-top:-1px;",
              class: "el-icon-question table-msg",
            }),
          ]
        ),
      ]);
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.delivery_index();
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.delivery_index();
    },
    changePage(page) {
      this.current.page = page;
      this.delivery_index();
    },
    // 列表
    delivery_index() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, this.current)) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.current
      );
      delivery_index(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          let member = res.data.member;
          res.data.list.data.map((e) => {
            e.member_length = 0;
            if (member[e.id]) {
              e.member_length = member[e.id].length;
            }
            if (e.default == 1) {
              e.member_length = res.data.default_num;
            }
          });
          this.list = res.data.list.data;
          this.totalCount = res.data.list.total;
          this.type_list = res.data.list.type_list;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 删除模板
    handleDelete(id) {
      this.$confirm("删除模板后，绑定的用户将会全部释放，确定吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
              ),
            },
            apiUrl().name,
            { id: id }
          );
          delivery_delete(data).then((res) => {
            if (res.errcode == 0) {
              this.$message.success("删除成功");
              this.delivery_index();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {});
    },
    // 设为默认
    setDefault(scope) {
      let row = scope.row;
      let id = row.id;
      let msg = `此操作将【${row.name}】设置为默认模板，是否继续？`;
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
              ),
            },
            apiUrl().name,
            { id: id }
          );
          delivery_setDefault(data).then((res) => {
            if (res.errcode == 0) {
              this.$message.success("设置成功");
              this.delivery_index();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {});
    },
    handleUser(row) {
      let id = row.id;
      let is_default = row.default;
      if (is_default == 1) {
        this.$router.push({
          path: "/user/freight/member/" + id,
          query: {
            default: is_default,
          },
        });
      } else {
        this.$router.push({
          path: "/user/freight/member/" + id,
        });
      }
    },
  },
  created() {
    // 列表
    this.delivery_index();
  },
};
</script>
<style lang="scss" scoped>
.mainor_form form {
  width: calc(100% - 180px);
}
.main_dialog .mainor_form form {
  width: calc(100% - 120px);
}

/deep/.main_table .el-table tr {
  .set_default {
    display: none;
    margin-left: 10px;
  }
}
/deep/.main_table .el-table tr:hover {
  .set_default {
    display: inline-block;
    cursor: pointer;
  }
}
/deep/ .main_table .el-table--small td .cell {
  display: flex;
  align-items: center;
  height: auto;
}
</style>
